<template>
	<view class="content">
		<view class="content_line">
			<view class="content_line_first">
				<view class="content_lt_view"></view>
				<view class="content_rt_view"></view>
			</view>

			<view class="context_view">
				<view style="display: flex;align-items: center;background-color: #f9f3eb;width: 100%;height: 120rpx;margin-top: 20rpx;">
					<image src="../static/alipaylogo.png" mode="aspectFit" style="width: 129rpx;height: 47rpx;margin-left: 32rpx;"></image>
					<input
						type="text"
						confirm-type="done"
						placeholder="请输入收款的支付宝账号"
						style="margin-left: 30rpx;width: 420rpx; height: 60rpx; background-color: #DCDCDC;font-size: 30rpx;text-align: center;"
						placeholder-class="inputStyle"
						@input="inputChangeAliPay"
					/>
				</view>

				<view
					style="display: flex; flex-direction: column;justify-content: center;align-items: center;background-color: #f9f3eb;width: 100%;height: 360rpx;margin-top: 37rpx;"
				>
					<view style="display: flex;justify-content: space-between;align-items: center; width: 630rpx;">
						<view style="display: flex;align-items: center;">
							<image src="../static/RMBLOGO.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;"></image>
							<input
								type="number"
								confirm-type="done"
								placeholder="首次满5元可提现"
								style="margin-left: 16rpx;font-size: 34rpx;"
								placeholder-class="inputNumberStyle"
								@input="inputChangeWithdrawalMoney"
							/>
						</view>
						<button
							style="width: 100rpx;height: 60rpx;font-size: 24rpx;color: #e6dcc8;line-height: 60rpx;text-align: center; padding: 0;margin: 0; background-color: #d45151;"
						>
							全部
						</button>
					</view>
					<view style="width: 630rpx;height: 1px;background-color: #B8B8B8;margin-top: 10rpx;"></view>
					<text style="color: #B8B8B8;font-size: 24rpx;align-self: flex-start;margin-left: 30rpx;margin-top: 10rpx;">·当前余额{{ blance }}元，三个工作日内到账</text>
					<text style="color: #B8B8B8;font-size: 24rpx;align-self: flex-start;margin-left: 30rpx;">·提现手续费0.6%</text>
					<text style="color: #B8B8B8;font-size: 24rpx;align-self: flex-start;margin-left: 30rpx;">·第一次提现5元起，第二次提现30元起，并自动扣除20元开通推广会员</text>
					<button
						@click="putWithdrawal"
						style="margin-top: 30rpx; width: 580rpx;height: 80rpx;text-align: center;line-height: 80rpx; font-size: 32rpx;color: #e6dcc8; background-color: #d45151;padding: 0;"
					>
						申请提现
					</button>
				</view>
			</view>

			<view class="content_line_last">
				<view class="content_lb_view"></view>
				<view class="content_rb_view"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			blance: 0,
			withdrawalMoney: '',
			aliPay: ''
		};
	},
	onLoad(options) {
		this.blance = options.blance;
	},
	methods: {
		inputChangeWithdrawalMoney(event) {
			this.withdrawalMoney = event.target.value;
		},
		inputChangeAliPay(event) {
			this.aliPay = event.target.value;
		},
		putWithdrawal() {
			if (!this.isEmpty(this.aliPay)) {
				if (!this.isEmpty(this.withdrawalMoney)) {
				} else {
					uni.showToast({
						title:'请填写提现金额',
						icon:'none'
					})
					return;
				}
			} else {
				uni.showToast({
					title:'请填写收款账户',
					icon:'none'
				})
				return;
			}

			console.log('发起提现');
			uni.showLoading({
				title: '加载中'
			});
			//把this存到这里，不然异步请求拿不到，后续用that代替this
			let that = this;
			this.$request
				.post('/pay/putWithdrawal', {
					data: {
						money: that.withdrawalMoney,
						account: that.aliPay
					},
					dataType: 'json',
					responseType: 'application/json'
				})
				.then(res => {
					uni.hideLoading();
					uni.showToast({
						title:res.data.data,
						icon: 'none'
					})
					console.log(res);
				})
				.catch(error => {
					uni.hideLoading();
					uni.showToast({
						title:'发生错误'
					})
					console.log('error:', error);
				});
		},
		isEmpty(obj) {
			if (typeof obj == 'undefined' || obj == null || obj == '') {
				return true;
			} else {
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #e6dcc8;
}

.content_line {
	width: 690rpx;
	height: 95%;
	border-style: solid;
	border-width: 7rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content_line_first {
	display: flex;
	justify-content: space-between;
}

.content_line_last {
	display: flex;
	justify-content: space-between;
}

.content_lt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_rt_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
}

.content_lb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.content_rb_view {
	width: 17rpx;
	height: 17rpx;
	background: #d45151;
	align-self: flex-end;
}

.context_view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/deep/ .inputStyle {
	font-size: 30rpx;
	color: #8a8a8a;
	margin-left: 6rpx;
}

/deep/ .inputNumberStyle {
	font-size: 34rpx;
	color: #b8b8b8;
}
</style>
